<template>
    <div class="gva-card-top">
        <div class="gva-card gva-card-top-item">
            <cardItem title="款式数量">
                <template #num> 10 </template>
                <template #body>
                    <productStylesChart />
                </template>
            </cardItem>
        </div>
        <div class="gva-card gva-card-top-item">
            <cardItem title="首板单数量">
                <template #num> 20 </template>
                <template #body>
                    <firstOrderChart />
                </template>
            </cardItem>
        </div>
        <div class="gva-card gva-card-top-item">
            <cardItem title="大板单数量">
                <template #num> 30 </template>
                <template #body>
                    <largeScaleOrderChart />
                </template>
            </cardItem>
        </div>
        <div class="gva-card gva-card-top-item">
            <cardItem title="未按时完成率">
                <template #num> 75% </template>
                <template #body>
                    <unCompletedRate />
                </template>
            </cardItem>
        </div>
        <div class="gva-card gva-card-top-item">
            <cardItem title="按时完成率">
                <template #num> 75% </template>
                <template #body>
                    <completedRate />
                </template>
            </cardItem>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import cardItem from "@/view/dashboard/components/cardItem.vue";
import productStylesChart from "@/view/dashboard/dashboardCharts/productStylesChart.vue";
import firstOrderChart from "@/view/dashboard/dashboardCharts/firstOrderChart.vue";
import largeScaleOrderChart from "@/view/dashboard/dashboardCharts/largeScaleOrderChart.vue";
import unCompletedRate from "@/view/dashboard/dashboardCharts/unCompletedRate.vue";
import completedRate from "@/view/dashboard/dashboardCharts/completedRate.vue";

defineOptions({
    name: "Dashboard",
});
</script>
<style lang="scss" scoped>
.gva-card-top {
    display: flex;
    justify-content: space-between;
    .gva-card-top-item {
        // padding-top: 1rem;
        // padding-bottom: 1rem;
        flex: 0 0 calc(20% - 14px);
    }
}
</style>